import React, { memo } from "react";
import styles from "../styles/Home.module.css";
import AppLyout from "../components/app-layout";
import Link from "next/link";
import { useEffect } from "react";
import axios from "axios";
import Router from "next/router";

const Home = memo(function (props) {
  const { name, banners, recommends } = props;

  // 代码传参
  const recommentItemClick = (item) => {
    Router.push({
      pathname: "/recommend",
      query: {
        id: item,
      },
    });
  };

  return (
    <div>
      <h1 className={styles.title}>Home首页</h1>
      <h2>轮播图</h2>
      <h2>推荐数据</h2>
      <ul>
        <li>推荐数据1</li>
        <li>推荐数据2</li>
        <li>推荐数据3</li>
        <li>推荐数据4</li>
      </ul>
      <p>safasfsdfsdf</p>

      <ul>
        {[1, 2, 3].map((item, index) => {
          return (
            // <Link key={item} href={`/recommend?id=${item}`}>
            //   <li>推荐数据id：{item}</li>
            // </Link>
            <li key={item} onClick={(e) => recommentItemClick(item)}>
              推荐数据id：{item}
            </li>
          );
        })}
      </ul>

      <h2>name:{name}</h2>
      <h2>轮播图数据:</h2>
      <ul>
        {banners.map((item, index) => {
          return <li key={item.title}>{item.title}</li>;
        })}
      </ul>
      <h2>推荐数据:</h2>
      <ul>
        {recommends.map((item, index) => {
          return <li key={item.title}>{item.title}</li>;
        })}
      </ul>

      <style>{`
        p {
          color: blue;
          text-decoration: underline;
        }
      `}</style>
    </div>
  );
});

Home.getInitialProps = async (props) => {
  const res = await axios({
    url: "http://123.207.32.32:8000/home/multidata",
  });

  return {
    name: "why",
    banners: res.data.data.banner.list,
    recommends: res.data.data.recommend.list,
  };
};

export default Home;
